<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <label for="">
        用户名： <input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密　码： <input type="password" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="ckb"/>
        记住密码
    </label>
    <br/><br/>
    <button>登录</button>


<script>
    var userName=document.querySelector('.userName');
    var pwd=document.querySelector('.pwd');
    var sub=document.querySelector('button');
    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){
//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }
//        否则清除用户信息
    }

    window.onload=function(){
//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }
</script>
</body>
</html>